<template>
  <div class="tagList">
    <div
      v-for="item in tagData"
      :key="item.count"
      class="tagContent"
      @click="getDigLog(item.text)"
    >
      <div class="tagCount">{{ item.count }}</div>
      <div class="tagWaring">
        <div class="tagText">{{ item.text }}</div>
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="item.text"
          placement="top-start"
        >
          <el-icon style="color: #fff"><Warning /></el-icon>
        </el-tooltip>
      </div>
    </div>
    <el-dialog title="高倍病例覆盖科室" :modelValue="lookDetail" width="65%">
      <avue-crud ref="crud" :option="option">
        <template #search>
          <div class="searchList">
            <el-form :inline="true">
              <el-form-item label="科室:">
                <el-select placeholder="请选择科室" style="width: 200px">
                  <el-option label="急诊" value="1"> </el-option>
                  <el-option label="骨科" value="2"> </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="排序:">
                <el-select placeholder="排序" style="width: 200px">
                  <el-option label="占高倍病例数" value="1"> </el-option>
                  <el-option label="出院人次" value="2"> </el-option>
                </el-select>
                <el-radio-group v-model="radio" style="margin-left: 10px">
                  <el-radio :label="3">升序</el-radio>
                  <el-radio :label="6">降序</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
            <div>
              <el-button>查询</el-button>
              <el-button>重置</el-button>
            </div>
          </div>
        </template>
      </avue-crud>
    </el-dialog>
  </div>
</template>
<script setup>
import { onBeforeUnmount, onMounted, ref, onActivated, onDeactivated } from "vue"
const lookDetail = ref(false)
const getDigLog = (title) => {
  if (title == "总权重") {
    lookDetail.value = true
  }
}
const props = defineProps(["tagData"])
const option = reactive({
  height: "100%",

  showSummary: true,
  tip: false,
  searchShowBtn: false,
  refreshBtn: false, // 刷新
  columnBtn: false, // 操作列显隐
  simplePage: true,
  highlightCurrentRow: true,
  border: true,
  index: true,
  selection: false,
  viewBtn: false,
  editBtn: false,
  addBtn: false,
  emptyBtn: false,
  searchBtn: false,

  dialogClickModal: false,
  // menuWidth: "100px",
  menu: false,
  column: [
    { prop: "category", label: "年度", hide: false },
    { prop: "prodName", label: "DIP编码", hide: false },
    { prop: "dosageForm", label: "DIP名称", hide: false },
    { prop: "dosageForm", label: "总病例", hide: false },
    { prop: "dosageForm", label: "总权重", hide: false },
    { prop: "member", label: "医疗总费用(万元)", hide: false },
    { prop: "aprvno", label: "DIP总费用(万元)", hide: false },
    { prop: "aaa", label: "总盈亏(万元)", hide: false },
    { prop: "bbb", label: "次均费用(元)", hide: false },
    { prop: "bbb", label: "平均住院日", hide: false },
  ],
})
</script>
<style scoped>
.tagList {
  display: flex;
  justify-content: space-around;
}
.tagContent {
  width: 200px;
  height: 55px;
  border-radius: 3%;
  background: #409eff;
  padding: 20px;
}
.tagCount {
  font-size: 22px;
  color: #fff;
}
.tagText {
  font-size: 14px;
  margin-right: 5px;
  color: #fff;
}
.tagWaring {
  display: flex;
  align-items: center;
  margin-top: 15px;
}
</style>
